<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<!--
Jumbotron 生成大的填充框 ,但是在bootstrap中不在继续使用 使用div 块来实现相同的效果
警告
  bootstrap5 提供了一种创建预定义警告消息的简单方法 警告框是使用 .alert 类创建的，后跟上下文类之一：
  .alert-success
  .alert-info
  .alert-warning
  .alert-danger
  .alert-primary
  .alert-secondary
  .alert-light
  .alert-dark

  <a href="#" class="alert-link">阅读这条消息</a>。  警告链接

  关闭警告
  如需关闭警告消息，请将 .alert-dismissible 类添加到警告容器。然后将 class="btn-close" 和 data-bs-dismiss="alert" 添加到链接或按钮元素（当您单击它时，警告框将消失）。
    <div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

  警告框动画
  .fade 和 .show 类在关闭警告消息时添加淡入淡出效果
  <div class="alert alert-success alert-dismissible fade show">

  按钮
  <button type="button" class="btn">基础</button>
  <button type="button" class="btn btn-primary">主要</button>
  <button type="button" class="btn btn-secondary">次要</button>
  <button type="button" class="btn btn-success">成功</button>
  <button type="button" class="btn btn-info">信息</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-danger">危险</button>
  <button type="button" class="btn btn-dark">深色</button>
  <button type="button" class="btn btn-light">浅色</button>
  <button type="button" class="btn btn-link">链接</button>

  <p>按钮类可用于a ,button,input元素</p>
  <a href="#" class="btn btn-success">链接按钮</a>
  <button type="button" class="btn btn-success">按钮</button>
  <input type="button" class="btn btn-success" value="输入按钮">

  为什么我们在链接的href 属性中写一个# ?
  由于我们没有任何可链接到的页面 ,而且我们不想收到404消息 因此我们将#  作为链接 实际上应该是搜索页面的真实url

  按钮轮廓
  bootstrap 5 提供了八个轮廓/边框按钮
  将鼠标移动上方可以看到额外的悬停效果
  <button type="button" class="btn btn-outline-primary">主要</button>
  <button type="button" class="btn btn-outline-secondary">次要</button>
  <button type="button" class="btn btn-outline-success">成功</button>
  <button type="button" class="btn btn-outline-info">信息</button>
  <button type="button" class="btn btn-outline-warning">警告</button>
  <button type="button" class="btn btn-outline-danger">危险</button>
  <button type="button" class="btn btn-outline-dark">深色</button>
  <button type="button" class="btn btn-outline-light text-dark">浅色</button>

  按钮尺寸
  对大按钮使用 .btn-lg类,对小按钮使用 .btn-sm类
  <button type="button" class="btn btn-primary btn-lg">大型</button>

  块级按钮
  如需创建跨越父类整个宽度的块级按钮,请在父元素上使用.d-grid "helper"类



-->
<body>
<div class="container mt-3">
  <h2>Jumbotron 实例</h2>
  <div class="mt-4 p-5 bg-primary text-white rounded">
    <h1>Jumbotron 实例</h1>
    <p>
      上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
    <p>
      上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接，北端的崇明岛处于长江入海口中，与周围的江苏、浙江、安徽三省多个城市共同构成世界级城市群长江三角洲城市群，是其重要的组成部分。</p>
  </div>
</div>
<br>
<div class="container mt-3">
  <h2>警告框</h2>
  <p>警报是使用.alert类创建的,然后是上下文颜色类</p>
  <p>设置了 class="btn-close" 和 data-bs-dismiss="alert" 的按钮用于关闭警报框。</p>
  <p>alert-dismissible 类将按钮向右侧对齐</p>
  <div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>成功!</strong>此警报框表示成功或积极的动作,访问的链接地址 <a href="#" class="alert-link">阅读这条消息</a>。
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>信息!</strong>此警报框表示中性的信息更改或操作
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>警告!</strong>此警报框表示可能需要注意的警告
  </div>
  <div class="alert alert-danger alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>危险!</strong>此警报框表示危险或潜在的负面操作
  </div>
  <div class="alert alert-primary alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>基本!</strong>此警报框表示重要的动作
  </div>
  <div class="alert alert-secondary alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>次要!</strong>此警报框表示不太重要的操作
  </div>
  <div class="alert alert-dark alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>深色!</strong>深灰色警报
  </div>
  <div class="alert alert-light alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>浅色!</strong>浅灰色警报
  </div>
</div>
<br>
<div class="container mt-3">
  <h1>bootstrap5 按钮</h1>
  <button type="button" class="btn">基础</button>
  <button type="button" class="btn btn-primary">主要</button>
  <button type="button" class="btn btn-secondary">次要</button>
  <button type="button" class="btn btn-success">成功</button>
  <button type="button" class="btn btn-info">信息</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-danger">危险</button>
  <button type="button" class="btn btn-dark">深色</button>
  <button type="button" class="btn btn-light">浅色</button>
  <button type="button" class="btn btn-link">链接</button>
  <br>
  <p>按钮类可用于a ,button,input元素</p>
  <a href="#" class="btn btn-success">链接按钮</a>
  <button type="button" class="btn btn-success">按钮</button>
  <input type="button" class="btn btn-success" value="输入按钮">
  <input type="submit" class="btn btn-success" value="提交按钮">
  <input type="reset" class="btn btn-success" value="重置按钮">
  <br>
  <p>轮廓/边框效果,鼠标移动上方看到悬停效果</p>
  <button type="button" class="btn btn-outline-primary">主要</button>
  <button type="button" class="btn btn-outline-secondary">次要</button>
  <button type="button" class="btn btn-outline-success">成功</button>
  <button type="button" class="btn btn-outline-info">信息</button>
  <button type="button" class="btn btn-outline-warning">警告</button>
  <button type="button" class="btn btn-outline-danger">危险</button>
  <button type="button" class="btn btn-outline-dark">深色</button>
  <button type="button" class="btn btn-outline-light text-dark">浅色</button>
  <br>
  <p>对大按钮使用.btn-lg类,小按钮使用.btn-sm</p>
  <button type="button" class="btn btn-primary btn-lg">大型</button>
  <button type="button" class="btn-primary">默认</button>
  <button type="button" class="btn-primary btn-sm">小型</button>
  <br>
  <p>全宽按钮</p>
  <div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">全宽按钮</button>
  </div>
  <br>
  <p>在多个全宽按钮时 ,可以使用 .gap-*类控制它们之间的间距</p>
  <div class="d-grid gap-3">
    <button type="button" class="btn btn-primary btn-block">全宽按钮</button>
    <button type="button" class="btn btn-primary btn-block">全宽按钮</button>
    <button type="button" class="btn btn-primary btn-block">全宽按钮</button>
  </div>
  <br>
  <p>活动/禁用按钮</p>
  <p>按钮可以设置为活动(显示为被按下) 或禁用(不可点击)状态</p>
  <p>类 .active 使按钮显示为被按下的状态，而 disabled 属性使按钮不可点击。请注意，a 元素不支持 disabled 属性，因此必须使用 .disabled 类使其在视觉上显示为禁用。</p>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
  <a href="#" class="btn btn-primary disabled">Disable Link</a>
  <br>
  <p>加载器按钮</p>
  <p>可以向按钮添加"spinner"</p>
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
  </button>
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
  </button>
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-grow-sm"></span>
    Loading...
  </button>
  <br>
  <p>bootstrap5 按钮组 允许将按钮组合在一起(在一行上)</p>
  <p>使用带有.btn-group类的div元素来创建按钮组</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <button type="button" class="btn btn-primary">小米</button>
  </div>
  <p>提示：请不要将按钮大小应用于组中的每个按钮，而是将类 .btn-group-lg 用于大按钮组或将 .btn-group-sm 用于小按钮组：</p>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <button type="button" class="btn btn-primary">小米</button>
  </div>
  <p>垂直按钮组,.btn-group-vertical 创建垂直按钮组：</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <button type="button" class="btn btn-primary">小米</button>
  </div>
  <p>并排按钮组 默认情况下 按钮组是inline的 存在多个按钮组时会并排显示</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <button type="button" class="btn btn-primary">小米</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">吉利</button>
    <button type="button" class="btn btn-primary">长城</button>
    <button type="button" class="btn btn-primary">红旗</button>
  </div>
  <br>
  <p>嵌套按钮组和下拉菜单</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">手机</a>
        <a class="dropdown-item" href="#">平板电脑</a>
      </div>
    </div>
  </div>
</div>
<div class="container mt-3">
  <p>Bootstrap 5 徽章</p>
  <p>在 span 元素中使用.badge类和上下文类如.bg-secondary来创建矩形徽章,注意徽章会缩放已匹配父元素的大小</p>
  <h2>标题 <span class="badge bg-secondary">New</span></h2>
  <p>上下文徽章 使用任意上下文类.bg-*来改变徽章的颜色</p>
  <h5>标题 <span class="badge bg-primary">主要</span></h5>
  <h5>标题 <span class="badge bg-success">成功</span></h5>
  <h4>胶囊徽章 <span class="badge rounded-pill bg-primary">主要</span></h4>
  <h4>胶囊徽章 <span class="badge rounded-pill bg-secondary">次要</span></h4>
  <span class="badge rounded-pill bg-success">成功</span>
  <span class="badge rounded-pill bg-danger">危险</span>
  <span class="badge rounded-pill bg-warning">警告</span>
  <span class="badge rounded-pill bg-info">信息</span>
  <span class="badge rounded-pill bg-light">浅色</span>
  <span class="badge rounded-pill bg-dark">深色</span>
  <p>使用.rounded-pill类使得徽章更加圆润</p>
  <h5>元素内徽章 在按钮内使用徽章</h5>
  <button type="button" class="btn btn-primary">消息 <span class="badge bg-danger">4</span></button>
</div>
<br>
<div class="container mt-3">
  <h2>进度条</h2>
  <p>基础进度条:进度条可用于显示用户在某个进程中的进度. 如需创建默认进度条 将.progress 类添加到容器元素并将.progress-bar类添加到其子元素</p>
  <p>使用css width属性设置进度条的宽度</p>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
  <p>进度条的高度默认为1rem通常是16px 使用css height属性来更改</p>
  <p>注意必须为进度容器和进度条设置相同的高度</p>
  <h5>进度条高度</h5>
  <p>在进度条内添加文本,以显示可见的百分百</p>
  <div class="progress" style="height: 20px">
    <div class="progress-bar" style="width: 20%; height: 20px">20%</div>
  </div>
  <h5>彩色进度条</h5>
  <p>默认情况下,进度条为蓝色主要.使用任何上下文背景类来更改其颜色</p>
  <!-- Blue -->
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div>

  <!-- Green -->
  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
  </div>

  <!-- Turquoise -->
  <div class="progress">
    <div class="progress-bar bg-info" style="width:30%"></div>
  </div>

  <!-- Orange -->
  <div class="progress">
    <div class="progress-bar bg-warning" style="width:40%"></div>
  </div>

  <!-- Red -->
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
  </div>

  <!-- White -->
  <div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
  </div>

  <!-- Grey -->
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  </div>

  <!-- Light Grey -->
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
  </div>

  <!-- Dark Grey -->
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
  </div>
  <h5>条纹进度条</h5>
  <p>使用.progress-bar-striped类向进度条添加条纹</p>
  <p>.progress-bar-animated 类来制作精度条动画</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%">70%</div>
  </div>
  <h5>进度条堆叠</h5>
  <div class="progress">
    <div class="progress-bar bg-success" style="width: 40%">
      Free Space
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      Warning
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      Danger
    </div>
  </div>
</div>
<div class="container mt-3">
  <h1>Bootstrap 5 加载器</h1>
  <p>要创建 spinner/加载器 使用 .spinner-border 类</p>
  <div class="spinner-border"></div>
  <h2>颜色加载器 使用任意的文本颜色utilites为spinner添加颜色</h2>
  <div class="spinner-border text-muted"></div>
  <div class="spinner-border text-primary"></div>
  <div class="spinner-border text-success"></div>
  <div class="spinner-border text-info"></div>
  <div class="spinner-border text-warning"></div>
  <div class="spinner-border text-danger"></div>
  <div class="spinner-border text-secondary"></div>
  <div class="spinner-border text-dark"></div>
  <div class="spinner-border text-light"></div>
  <p>如果希望spinner/加载器增长而不是旋转 使用.spinner-grow类</p>
  <div class="spinner-grow text-muted"></div>
  <div class="spinner-grow text-primary"></div>
  <div class="spinner-grow text-success"></div>
  <div class="spinner-grow text-info"></div>
  <div class="spinner-grow text-warning"></div>
  <div class="spinner-grow text-danger"></div>
  <div class="spinner-grow text-secondary"></div>
  <div class="spinner-grow text-dark"></div>
  <div class="spinner-grow text-light"></div>
  <p>使用 .spinner-border-sm 或 .spinner-grow-sm 创建较小的加载器</p>
  <div class="spinner-border spinner-border-sm"></div>
  <div class="spinner-grow spinner-grow-sm"></div>
</div>
<div class="container mt-3">
  <h1>Bootstrap 5 分页</h1>
  <p>网站如果含有多个页面 可以为每个页面添加某种分页</p>
  <p>创建基本分页 将.pagination 类添加到ul元素 然后将 .page-item 添加到每个 li 元素 并且将.page-link类添加到li中的每个链接</p>
  <p>活动状态 使用 .active 类突出显示当前页面</p>
  <p>禁用状态 使用 .disabled 类用于不可点击的链接</p>
  <p>调整分页大小 为较大的类使用 .pagination-lg 或 为较小的块添加 .pagination-sm类</p>
  <p>对齐方式 默认左对齐 居中对齐: justify-content-center 右对齐: justify-content-end</p>
  <div class="container mt-3">
    <ul class="pagination pagination-lg" style="margin: 20px 0">
      <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
    <ul class="pagination pagination-sm justify-content-end" style="margin: 20px 0">
      <li class="page-item"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>
  <p>分页的另外一种形式是面包屑 : 照片 / 2019年秋季 / 中国 / 北京</p>
  <p>.breadcrumb 和 .breadcrumb-item类 规定当前页面在导航层次结构中的位置</p>
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">照片</a></li>
    <li class="breadcrumb-item"><a href="#">2024年夏季</a></li>
    <li class="breadcrumb-item"><a href="#">中国</a></li>
    <li class="breadcrumb-item"><a href="#">北京</a></li>
  </ul>
</div>
<div class="container mt-3">
  <h1>基础的列表组</h1>
  <p>最基本的列表组是包含列表项的无序列表</p>
  <p>使用 .list-group的ul元素和类为 .list-group-item的li元素</p>
  <p>活动状态 使用.active 类突出显示当前项目</p>
  <ul class="list-group">
    <li class="list-group-item active">活动项目</li>
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
  </ul>
  <p>包含链接项的列表组 如需创建带有链接项目的列表组,使用div代替ul,用a 代替li 如果悬停时的灰色背景色 使用.list-group-item-action类</p>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">第一项</a>
    <a href="#" class="list-group-item list-group-item-action">第二项</a>
    <a href="#" class="list-group-item list-group-item-action">第三项</a>
  </div>
  <p>禁用项目 .disabled 类为禁用的项目添加了较浅的文本颜色,当在链接上使用时,将去悬停效果</p>
  <div class="list-group">
    <a href="#" class="list-group-item disabled">被禁用的项目</a>
    <a href="#" class="list-group-item disabled">被禁用的项目</a>
    <a href="#" class="list-group-item">第三项</a>
  </div>
  <p>删除边框 使用.list-group-flush 类删除边框和圆角</p>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
  </ul>
  <p>带有编号的列表组 使用.list-group-numbered 类创建前面带有数字的列表项</p>
  <ol class="list-group list-group-numbered">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
  </ol>
  <p>水平列表组 列表项水平显示而不是垂直显示 使用.list-group-horizontal 类添加到 .list-group:</p>
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
  </ul>
  <p>为列表项添加颜色</p>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
  </ul>
  <p>带上下文类的链接项目</p>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
  </div>
  <p>带徽章的列表组 将.badge类 与 utility/helper 类结合 可在列表组中添加徽章</p>
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      收件箱
    <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      广告邮件
      <span class="badge bg-primary rounded-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      垃圾箱
      <span class="badge bg-primary rounded-pill">99</span>
    </li>
  </ul>
</div>
<div class="container mt-3">
  <h1>Bootstrap5 卡片</h1>
  <p>Bootstrap 5中的卡片是带边框的框,其内容周围有一些内边距,它包含页眉,页脚,内容,颜色</p>
  <p>基础的卡片 是.card类创建的 卡片中的内容有一个 .card-body 类</p>
  <p>.card-header 类为卡片添加标题 .card-footer类为卡片添加页脚:</p>
  <p>使用上下文卡片 添加背景颜色 </p>
  <p>将 .card-img-top 或 card-img-bottom 添加到 img 可将图像放置在卡片的顶部或底部.</p>
  <p>请注意 在.card-body之外添加了图像以跨越整个宽度</p>
  <div class="card">
    <div class="card-header">页眉</div>
    <div class="card-body">
      <h4 class="card-title">卡片标题</h4>
      <p class="card-text">一些实例文本.一些实例文本</p>
      <a href="#" class="card-link">卡片链接</a>
      <a href="#" class="card-link">另一个链接</a>
    </div>
    <div class="card-footer">页脚</div>
    <br>
    <div class="card" style="width: 400px">
      <img class="card-img-top" src="/img/1.jpg" alt="Card image">
      <div class="card-body">
        <h4 class="card-title">Bill Gates</h4>
        <p class="card-text">Bill Gates 是一位程序员和工程师.一些示例文本,一些示例文本</p>
        <a href="#" class="btn btn-primary">查看个人资料</a>
      </div>
    </div>
    <br>
    <br>
    <p>将图像转换为卡片背景并使用 .card-img-overlay 在图像顶部添加文本</p>
    <div class="card" style="width: 500px">
      <img class="card-img-top" src="/img/girl_flower_dress_1066910_1920x1080.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h4 class="card-title">Bill Gates</h4>
        <p class="card-text text-white">一些示例文本,一些示例文本</p>
        <a href="#" class="btn btn-primary">查看个人资料</a>
      </div>
    </div>
    <div class="card bg-success text-while">
      <div class="card-body">Success card</div>
    </div>
  </div>
</div>
<div class="container mt-3">
  <h1>下拉列表</h1>
  <p>下拉菜单是一种可切换菜单,允许用户从预定义列表中选择值</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
  </div>
</div>
</body>
</html>
